<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stove :: ViewSlider </title>
<link href="style/common.css" rel="stylesheet"/>
<style>
body
{
	margin:0px;
	padding:0px;
}

#ViewSliderStage
{
	position: relative;
	display: inline-block;
	overflow:hidden;
	margin:0px;
	padding:0px;
	width: 80%;
	height: 400px;
	border: solid 1px #000;
}
#ViewSliderStage .board
{
	margin:0px;
	padding:0px;
	background-color:#063;
}
#ViewSliderStage .page
{
	display: inline-block;
	background-color:#39C;
}
#controllBox
{
	text-align:center;
}
.myContent
{
	font-size: 90px;
	font-weight: 600;
}
</style>
<script src="./js/importlibs.js"></script>
<script type="text/javascript">
// [ 응용 샘플 ]
var _myContents;
var _nxSlider;

window.onload = function()
{
	// 컨텐츠 리스트 정의
	// Array.<DIV Element>
	_myContents 	= [];
	var _list		= document.getElementsByClassName( "myContent" );
	for( var i=0; i<_list.length; i++ )
	{
		_myContents.push( _list[i] );
	}
	// 슬라이더 객체 생성
	var _sliderStage						= document.getElementById( "ViewSliderStage" );
	_nxSlider								= new ViewSlider( _sliderStage );
	_nxSlider.onTweenComplete 	= onSliderTweenComplete;
	
	// 기본값 설정
	onClickPush( null );
	updatePages();
}

// 버튼 이벤트
function onClickPop( e )
{
	_nxSlider.pop();
}
function onClickPush( e )
{
	if( _myContents.length <= 0 || _myContents.length <= _nxSlider.length() ) return;
	_nxSlider.push( _myContents[ _nxSlider.length() ] );
}

// [ 트윈 완료 콜백 ]
function onSliderTweenComplete()
{
	console.log( "onSliderTweenComplete", _nxSlider );
	updatePages();
}
function updatePages()
{
	document.getElementById( "pages" ).innerHTML = _nxSlider.length() + "/" + _myContents.length;
}

</script>

</head>

<body>
<h1>ViewSlider</h1>
<br>
Click page buttons!
<hr>
<div id="controllBox">
<input type="button" value="<<" onClick="onClickPop(event)"/>
<span id="pages">0/10</span>
<input type="button" value=">>" onClick="onClickPush(event)"/>
</div>

<div style="width:100%;text-align:center">
    <div id="ViewSliderStage">
    </div>
</div>

<hr>
<p>
[Propoerties]
  <br>
  length() : 현재 페이지, 전체 쌓인 페이지수
</p>
<p>
[Method]<br>
<span class="MethodSpan">function</span> push( page ) : View 영역에 새로운 페이지를 추가함<br>
<span class="MethodSpan">function</span> pop() : 현재 보여지는 페이지를 뺌( 빠진 컨텐츠는 반환됨 )<br>
</p>
<p>
[Call Back Function] 
  <br>
onTweenComplete : 슬라이드 모션 효과가 종료되었을때 호출
</p>
여백등은 <span class="CSSLabel">CSS</span>를 통해 수정가능. <br>
<span class="CSSLabel">CSS1</span> : 녹색영역 <span class="BoardLabel">board</span> 클래스 <br>
<span class="CSSLabel">CSS2</span> : 하늘색영역 <span class="PageLabel">page</span> 클래스 <br>


<div style="visibility:hidden">
    <div class="myContent">Content 1</div>
    <div class="myContent">Content 2</div>
    <div class="myContent">Content 3</div>
    <div class="myContent">Content 4</div>
    <div class="myContent">Content 5</div>
    <div class="myContent">Content 6</div>
    <div class="myContent">Content 7</div>
    <div class="myContent">Content 8</div>
    <div class="myContent">Content 9</div>
    <div class="myContent">Content 10</div>
</div>
</body>
</html>
